<script setup>
import _ from 'lodash'
import {computed, onMounted, ref, watch} from "vue";
import { useCommonStore } from "@jzl/stores";
import {api} from "@jzl/api";

defineProps({
  name: 'Profile'
})

const loading = ref(false)
const isEdit = ref(false)
const user = ref({})

const loginUser = computed(() => {
  return useCommonStore()?.loginUser;
});

watch(() => loginUser.value, () => {
  user.value = _.cloneDeep(loginUser.value);
}, { deep: true })

onMounted(() => {
  user.value = _.cloneDeep(loginUser.value);
})

const showEdit = () => {
  isEdit.value = true;
}

const hideEdit = () => {
  isEdit.value = false;
}

const handleAvatarSuccess = (res, file) => {
  user.value.avatar = res.data;
}

const beforeAvatarUpload = (file) => {

  if(!file) {
    return false;
  }

  const isGtMax = file.size / 1024 / 1024 > 2;

  if (isGtMax) {
    $jui.toast({
      message: '上传头像图片大小不能超过 2MB!',
      type: 'warning'
    });
  }

  return !isGtMax;
}

const edit = async () => {
  let data = api.admin.updateAdmin(user.value.id, _.cloneDeep(user.value));

  if(data) {
    $jui.toast('修改成功！');
    await useCommonStore()?.initLoginUser();
    isEdit.value = false;
  }
}
</script>
<template>
  <div class="portal-detail-container">
    <!--<h3 class="page-title"> 账号设置 </h3>-->

    <el-form ref="form" :model="user" label-width="100px" v-if="user" style="width:500px;">
      <el-form-item label="头像">
        <!--<el-upload
            class="avatar-uploader"
            action="/mgr/api/common/fileupload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :disabled="!isEdit">
            <img v-if="user.avatar" :src="user.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>-->
        <file-picker v-model="user.avatar" :is-view="!isEdit" aspect-ratio="1:1"></file-picker>
      </el-form-item>
      <el-form-item label="账号ID">
        <div class="item-info-readonly">{{user.loginname}}</div>
      </el-form-item>
      <el-form-item label="昵称">
        <div class="item-info-readonly" v-text="user.nickname" v-if="!isEdit"></div>
        <el-input v-model="user.nickname" v-else></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <div class="item-info-readonly" v-text="user.arg0" v-if="!isEdit"></div>
        <el-input v-model="user.arg0" v-else></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱">
        <div class="item-info-readonly" v-text="user.arg1" v-if="!isEdit"></div>
        <el-input v-model="user.arg1" v-else></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="showEdit()" v-if="!isEdit">修改</el-button>
        <el-button @click="hideEdit()" v-if="isEdit">取消</el-button>
        <el-button type="primary" v-if="isEdit" @click="edit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.item-info-readonly{
  color:#999;
  font-size:18px;
}
</style>
